<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import {useRoute}   from "vue-router";
import server from "../utils/request.js";
import {getUserIdFromToken} from "../utils/jwtUtil.js"
import router from "../router/index.js";
import {importImage} from "../utils/load_assets.js";


//根据登录的token信息拿到登录的id,根据id拿到数据
const userId = getUserIdFromToken();

// 表单数据
const formData = ref({
  id: '',
  username: '',
  name: '',
  image: '',
  phone: '',
  intro: '',
  longitude: '',
  latitude: ''
})

// 获取商家详情数据
const fetchMerchantDetail = async () => {
  try {
    let {data:data} = await server.get(`merchant/${userId}`)
    Object.assign(formData.value,data.data)
  } catch (error) {
    ElMessage.error('获取商家详情失败')
  }
}
function completeInfo(){
  router.push("completeInfo")
}
// 页面加载时获取数据
onMounted(() => {
  fetchMerchantDetail()
})
</script>
<template>
  <el-card  class="page-card">
    <div slot="header" class="card-header">
      <span>商家信息</span>
    </div>
    <div class="button-group">
      <el-button
          type="primary"
          size="small"
          @click="completeInfo"
      >
        去完善信息
      </el-button>
    </div>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="商家ID">{{ formData.id }}</el-descriptions-item>
      <el-descriptions-item label="商家账号">{{ formData.username }}</el-descriptions-item>
      <el-descriptions-item label="商户名">{{ formData.name }}</el-descriptions-item>
      <el-descriptions-item label="商家照片">
        <el-image
            v-if="importImage.reportImg(formData.image)"
            :src="importImage.reportImg(formData.image)"
            style="width: 200px; height: 150px; object-fit: contain"
            :preview-src-list="[formData.image]"
        ></el-image>
        <span v-else>无照片</span>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">{{ formData.phone }}</el-descriptions-item>
      <el-descriptions-item label="商家描述">{{ formData.intro || '无描述' }}</el-descriptions-item>
      <el-descriptions-item label="经度">{{ formData.longitude }}</el-descriptions-item>
      <el-descriptions-item label="纬度">{{ formData.latitude }}</el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<style scoped>
.merchant-page {
  padding: 20px;
}

.page-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.edit-btn {
  margin-left: auto;
}

.button-group {
  display: flex;
  gap: 10px;
}

.merchant-form {
  margin-top: 20px;
}

.avatar-uploader {
  display: inline-block;
}

.upload-placeholder {
  width: 200px;
  height: 150px;
  border: 1px dashed #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.upload-text {
  margin-top: 8px;
  color: #666;
  font-size: 14px;
}
</style>